<template>
 <div class="rating_page">
   <section v-if="!showLoading">
     <head-top head-title="订单备注" :go-back=true></head-top>
     <section class="quick_remark" v-if="remarkList.remarks.length">
       <header class="header_style">快速备注</header>
       <ul class="remark_arr_list_ul">
         <li class="remark_arr_list_li" v-for="(item,index) in remarkList.remarks">
              <span v-for="(remarkTtem, remarkIndex) in item" :key="remarkIndex" class="remark_item_li"
                    :class="{first: remarkIndex == 0,
                    last: remarkIndex == item.length - 1,
                    choosed: remarkText[index]&&(remarkText[index][0] == remarkIndex)}"
                    @click.stop="chooseRemark(index, remarkIndex, remarkTtem)">
              {{remarkTtem}}</span>
         </li>
       </ul>
     </section>
     <section class="input_remark quick_remark">
       <header class="header_style">其他备注</header>
       <textarea class="input_text" v-model="inputText" placeholder="请输入备注内容(可不填)"></textarea>
       <div>
         <yd-button size="large" type="primary" @click.native="confirmRemark">确定</yd-button>
         <yd-button size="large" type="hollow" @click.native="cancelRemark">重置</yd-button>
       </div>
     </section>

   </section>

   <div class="loading-container" v-show="showLoading">
     <loading></loading>
   </div>
 </div>
</template>

<script type="text/ecmascript-6">
import headTop from 'components/header/head'
import loading from 'components/common/loading/loading'
import {getRemark} from 'src/service/getData'
import  {mapMutations} from 'vuex'
  export default {
  data(){
     return{
       id: null,
       sig: null,
       remarkList: null,
       showLoading: true,
       remarkText: {},
       inputText: null
     }
   },
   created(){
     this.id = this.$route.query.id;
     this.sig = this.$route.query.sig;
     this.getRemark();
   },
   mounted(){
   },
   computed: {
   },
   methods: {
     ...mapMutations([
       'CONFIRM_REMARK'
     ]),
     async getRemark(){
       this.remarkList = await getRemark(this.id, this.sig);
       this.showLoading = false;
     },
     //选择备注
     chooseRemark(index, remarkIndex, text){
       this.remarkText[index]=[remarkIndex, text];
       this.remarkText = Object.assign({}, this.remarkText);
     },
     confirmRemark(){
       this.CONFIRM_REMARK({remarkText: this.remarkText, inputText: this.inputText});
       this.$router.go(-1);
     },
     cancelRemark(){
       this. remarkText = {};
     }
   },
   components:{
     loading,
    headTop
   }
  }
</script>
<style scoped lang="scss" rel="stylesheet/scss">
@import '../../../style/mixin';

.header_style{
  @include sc(.65rem, #333);
  line-height: 2rem;
}
.quick_remark{
  background-color: #fff;
  margin-top: .4rem;
  padding: 0 .6rem 1rem;
  ul{
    display: flex;
    flex-wrap: wrap;
    li{
      margin-right: .6rem;
      margin-bottom: 1.2rem;
      span{
        @include sc(.6rem, #333);
        padding: .3rem .6rem;
        border: 0.025rem solid #3190e8;
        border-left: 0;
      }
      .first{
        border-left: 0.025rem solid #3190e8;
        border-top-left-radius: .2rem;
        border-bottom-left-radius: .2rem;
      }
      .last{
        border-top-right-radius: .2rem;
        border-bottom-right-radius: .2rem;
      }
      .choosed{
        color: #fff;
        background-color: #3190e8;
      }
    }
  }
}
.input_remark{
  background-color: #fff;
  .input_text{
    width: 100%;
    background-color: #f9f9f9;
    border: 0.025rem solid #eee;
    resize: none;
    min-height: 4.5rem;
    border-radius: .2rem;
    @include sc(.6rem, #666);
    padding: .5rem;
  }
}
.determine{
  background-color: #4cd964;
  @include sc(.7rem, #fff);
  text-align: center;
  margin: 0 .7rem;
  line-height: 1.8rem;
  border-radius: 0.2rem;
}

</style>
